<template>
  <div class="qysbgf">
    <!-- 区域设备规范 -->
    <el-form ref="form" :model="queryInfo" :inline="true" label-width="80px">
      <!-- <el-form-item label="设施类型">
        <el-select v-model="queryInfo.facilitiesType" placeholder="请选择">
          <el-option
            v-for="dict in facilitiesType"
            :key="dict.dictValue"
            :label="dict.dictLabel"
            :value="dict.dictValue"
          />
        </el-select>
      </el-form-item> -->
      <!-- <el-form-item>
        <el-button type="primary" size="small" @click="searchbtn"> 搜索 </el-button>
        <el-button size="small" > 重置 </el-button>
      </el-form-item> -->
    </el-form>
    <el-button type="primary" icon="el-icon-plus" @click="showDialog">新增</el-button>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column
        prop="facilityType"
        label="设施类型"
        align="center"
        :formatter="schoolNatureFormat"
      >
      </el-table-column>
      <el-table-column prop="facilityCount" label="设施数量" align="center" />
      <el-table-column prop="updateBy" label="变更原因" align="center" />
      <el-table-column prop="createTime" label="创建时间" align="center">
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <div>
            <!-- <el-button
              type="text"
              icon="el-icon-edit"
              @click="updateShow(scope.row)"
              >修改</el-button
            > -->
            <el-button type="text" icon="el-icon-delete" @click="deleteBtn(scope.row)">删除</el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog
      :title="showType == 1 ? '新增设备' : '修改设备'"
      :visible.sync="dialogVisible"
      width="30%"
      @close="handleClose"
      :close-on-click-modal="false"
    >
      <el-form
        ref="formName"
        :model="queryParams"
        :rules="rules"
        :inline="true"
        label-width="120px"
      >
        <el-form-item label="设施类型：" prop="facilityType">
          <el-select
            v-model="queryParams.facilityType"
            placeholder="请选择设施类型"
            :disabled="showType === 1 ? false : true"
          >
            <el-option
              v-for="dict in facilitiesType"
              :key="dict.dictValue"
              :label="dict.dictLabel"
              :value="dict.dictValue"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="设施数量：" prop="facilityCount">
          <el-input
            v-model="queryParams.facilityCount"
            type="number"
            placeholder="请输入设施数量"
            min="0"
          ></el-input>
        </el-form-item>
        <el-form-item label="变更原因：" prop="updateBy">
          <el-input
          placeholder="请输入变更原因"
            v-model="queryParams.updateBy"
            type="textarea"
          ></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false" size="small">取 消</el-button>
        <el-button type="primary" @click="addOrEditDevice" size="small"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  listBySchool,
  facilitiesAdd,
  facilitiesUpdate,
  facilitiesDel,
} from "@/api/qu/yssshesb";
export default {
  name: "",
  data() {
    return {
      queryInfo: {
        pageNum: 1,
        pageSize: 10,
      },
      total: 0,
      queryParams: {},
      facilitiesType: null,
      tableData: [],
      dialogVisible: false,
      rules: {
        facilityType: [
          { required: true, message: "请选择设施类型", trigger: "change" },
        ],
        facilityCount: [
          { required: true, message: "请输入设施数量", trigger: "change" },
        ],
      },
      showType: null,
    };
  },
  created() {
    this.getDicts("facility_type").then((response) => {
      this.facilitiesType = response.data;
    });
  },
  components: {},
  computed: {},
  mounted() {
    this.listBySchool();
  },
  methods: {
    //地区类型字典翻译
    schoolNatureFormat(row, column) {
      return this.selectDictLabel(this.facilitiesType, row.facilityType);
    },
    // 增加显示弹窗
    showDialog() {
      this.showType = 1;
      this.dialogVisible = true;
      this.queryParams = {}
      this.$refs.formName.resetFields()
    },
    // 修改显示弹窗
    updateShow(row) {
      this.showType = 2;
      row.facilityType = row.facilityType + "";
      this.queryParams = {...row};
      this.dialogVisible = true;
    },
    handleClose() {
      this.dialogVisible = false;
    },
    searchbtn(){
      this.listBySchool()
    },
    // 添加或修改设备
    addOrEditDevice() {
      this.$refs.formName.validate(async (valid) => {
        if (valid) {
          const params = {
            id:this.queryParams.id,
            facilityCount:this.queryParams.facilityCount
          }
          const { data, code, msg } =
            this.showType == 1
              ? await facilitiesAdd(this.queryParams)
              : await facilitiesUpdate(params);
          if (code == 200) {
            this.$message.success(this.showType == 1 ? "添加成功" : '修改成功');
            this.dialogVisible = false;
            this.searchbtn()
          } else {
            this.$message.error(msg);
          }
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    // 删除
    deleteBtn(row){
      this.$confirm('此操作将永久删除, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async() => {
          const {code,msg} = await facilitiesDel(row.id)
          if(code == 200){
            this.$message({
            type: 'success',
            message: '删除成功!'
          });
          this.searchbtn()
          }else{
            this.$message.error(msg)
          }

        })
    },
    // 列表
    async listBySchool() {
      const { rows, code, msg, total } = await listBySchool(
        this.queryInfo
      );
      if (code == 200) {
        this.tableData = rows;
        this.total = total;
      } else {
        this.$message.error(msg);
      }
    },
  },
};
</script>

<style scoped lang="scss">
.qysbgf {
  padding: 20px;
}
</style>
